<template>
  <div v-if="visible" class="modal flex justify-center items-center">
    <a-card class="inner" :body-style="{ height: '100%' }">
      <template #title>
        {{ data.name }}
      </template>
      <template #extra>
        <a-button @click="visible = false">
          <IconClose />
        </a-button>
      </template>
      <div class="flex list gap-2 h-full">
        <div>
          <ul class="flex gap-4 flex-col overflow-auto h-full">
            <li
              v-for="item in data.items"
              :key="item.themeId"
              class="relative w-[120px]"
              :class="{ active: current?.themeId === item.themeId }"
              @click="selectItem(item)"
            >
              <a-card>
                <template #cover>
                  <img :src="item.imgSrc" class="w-full" />
                </template>
                <div>
                  {{ item.themeName }}
                </div>
              </a-card>
            </li>
          </ul>
        </div>
        <div class="flex-1 flex justify-center items-center bg-gray-50 p-3 relative">
          <a-button-group
            v-if="query.scope === ENUM_DATA_SCOPE.THIS_SHOP"
            class="absolute bottom-4 right-4 flex gap-8"
          >
            <!-- <a-button @click="changeSkin"> {{ t["换肤"] }} </a-button> -->
            <a-button @click="editItem"> {{ t["设置"] }} </a-button>
            <a-button type="primary" @click="drawItem">
              {{ t["绘制"] }}
            </a-button>

            <a-button status="danger" @click.stop="del">
              {{ t["删除"] }}
            </a-button>
          </a-button-group>
          <img :src="current?.imgSrc" style="width: 300px" class="image" />
        </div>
      </div>
    </a-card>
    <FileSelector type="0" @change="save" v-model:visible="showFileSelector" />
  </div>
</template>

<script setup lang="ts">
import { LcdGroup, LcdTheme } from "@/api/service/theme/types";

import { deleteTheme, selectSkin } from "@/api/service/theme/theme";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";

import { Library } from "@/api/service/library/types";
import FileSelector from "@/views/admin/components/file-selector/FileSelector.vue";
import { Modal } from "@arco-design/web-vue";
import { componentList } from "../board/data/data";
import { showBoard, showForm, themForm } from "../data/form";
import { query } from "../data/table";

const showFileSelector = ref(false);
const t = translate("公共模块");
const visible = defineModel("visible");

const current = ref<LcdTheme>();
const props = defineProps<{
  data: LcdGroup;
}>();

const drawItem = () => {
  if (current.value) {
    themForm.value = current.value;
    showBoard.value = true;
    if (current.value.image) {
      componentList.value = current.value.image;
    }
  }
};

// const changeSkin = () => {
//   showFileSelector.value = true;
// };

const save = (item: Library[]) => {
  if (current.value) selectSkin(current.value.themeId, item[0].uri);
};
const editItem = () => {
  if (current.value) {
    themForm.value = current.value;
    showForm.value = true;
  }
};
const del = () => {
  Modal.confirm({
    content: t.value?.["是否执行"],
    onOk() {
      if (current.value) {
        deleteTheme([current.value.themeId]);
      }
    },
    okText: "Ok",
    cancelText: "Cancel"
  });
};
const selectItem = (item: LcdTheme) => {
  current.value = item;
};

watch(
  visible,
  (v) => {
    if (!v) current.value = undefined;
    else {
      current.value = props.data.items[0];
    }
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.modal {
  width: 100%;
  height: 100vh;
  background: #8f8f8f9f;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;

  .inner {
    width: 60vw;
    min-width: 600px;
    height: 800px;

    .image {
      width: 100%;
      outline: 6px solid rgb(197, 197, 197);
    }

    .list {
      overflow: auto;
      height: calc(100% - 40px);
    }

    li {
      border: 1px solid transparent;
      cursor: pointer;
    }
  }
}

.active {
  border: 1px solid var(--primary) !important;
}
</style>
